<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-del="rowDel"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               @selection-change="selectionChange"
               v-model="form"
               :data="data">
      <template #menu-left="{type,size}">
        <el-button type="success"
                   :size="size" :disabled="multiple"
                   icon="el-icon-pointer"
                   @click="handleBatchReceive">批量领取
        </el-button>
      </template>
      <template #status="{ size, row, index }">
        <el-tag :type="tagStatus(row.status)"
                :size="size">{{ row.$status }}</el-tag>
      </template>
      <template #isUrgent="{ size, row, index }">
        <el-tag :type="tagIsUrgent(row.isUrgent)"
                :size="size">{{ row.$isUrgent }}</el-tag>
      </template>
      <template #menu-before="{ size, row, index }"	>
        <el-link type="primary" v-if="!row.receiveUserName"
                 :size="size" :underline="false"
                 icon="el-icon-pointer" style="margin-right: 10px"
                 @click="handleReceive(row)"> <span style="padding-left:5px;">领 取</span>
        </el-link>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script >
import {addWorkOrders, delWorkOrders, listWorkOrders, updateWorkOrders} from "/@/api/produce/workOrders";
import {reactive, ref, toRefs} from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import {updateReceive} from "../../api/produce/workOrders";
export default {
  name: "workOrders",

  setup(props){
    const { proxy } = useCurrentInstance();

    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      index: false,
      viewBtn: false,
      selection: true,
      addBtn:false,
      searchLabelWidth:100,
      excelBtn:false,
      editBtn: false,
      labelWidth:100,
      column: [
        {
          label: '生产任务单编码',
          prop: "productionOrdersEncode",
          width: 180,
        },
        {
          label: '工单编码',
          prop: "encode",search: true,
          width: 250,

        },

        {
          label: '商品名称',
          prop: "productName",search: true,
          width: 150,
        },



        {
          label: '规格型号',
          prop: "specification",
          width: 150,
        },


        {
          label: '计划数量',
          prop: "planProduceTotal",
          width: 150,
        },
        {
          label: '未派工数量',
          prop: "noDispatchNumber",
          width: 150,
        },
        {
          label: '工单数量',
          prop: "workOrdersNumber",
          width: 150,
        },

        {
          label: '工艺信息',
          prop: "craftName",
          width: 150,
        },

        {
          label: '计划生产时间',
          prop: "planProduceTime",
          width: 150,
        },
        {
          label: '计划完成时间',
          prop: "planFinishTime",
          width: 150,
        },

        {
          label: '状态',
          prop: "status",
          type: 'select',search: true,
          dicData:[
            {label:'待生产',value:0},
            {label:'生产中',value:1},
            {label:'已完成',value:2},
          ],
          dataType:'number',
          width: 150,
        },

        {
          label: '审核结果',
          prop: "updateTime",
          width: 150,
        },

        {
          label: '加急标志',
          prop: "isUrgent",
          width: 150,
          type: 'select',
          dicData:[
            {label:'普通',value:0},
            {label:'加急',value:1},
          ],
          dataType:'number',
        },

        {
          label: '领取人',
          prop: "receiveUserName",
          width: 150,
        },


        {
          label: '领取时间',
          prop: "receiveTime", minWidth: 200,
          format: 'YYYY-MM-DD HH:mm:ss',
          type: 'date', display: false,
          search:true,searchRange:true,
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      ]
    });
    const loading = ref(true);
    const multiple = ref(true);
    const data = ref([]);
    const crud = ref();
    const selectionList = ref([]);
    const queryParams = ref({});
    const form = ref({});
    const page = ref({
      pageSize: 10,
      currentPage: 1,
      total: 0

    })
    const onLoad = (pages, params = {}) => {
      loading.value = true;
      listWorkOrders(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list;
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const rowSave = (row, done, loading) => {
      addWorkOrders(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowUpdate = (row, index, done, loading) => {
      updateWorkOrders(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowDel = (row) => {
      proxy.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return delWorkOrders(row);
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }
    const tagStatus = (status)=>{
      if (status == 0) {
        return 'info'
      }else if (status == 1) {
        return 'success'
      }else if (status == 2) {
        return 'danger'
      }
    }
    const tagIsUrgent = (status)=>{
      if (status == 0) {
        return 'info'
      }else if (status == 1) {
        return 'danger'
      }
    }

    const handleReceive = (row) => {
      let ids = row.id ;
      proxy.$confirm("确定领取选择的数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            console.log({request:ids.toString()})
            return updateReceive(ids.toString());
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const selectionChange = (list = []) => {
      selectionList.value = list;
      multiple.value = list.filter(item => item.receiveUserName).length > 0

    }
    const handleBatchReceive = () => {
      let ids = selectionList.value.map(item=> item.id) ;
      proxy.$confirm("确定领取选择的数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            console.log({request:ids.toString()})
            return updateReceive(ids.toString());
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }

    return {
      option,
      loading,
      data,
      page,
      form,
      queryParams,
      multiple,
      onLoad,
      rowSave,
      rowUpdate,
      rowDel,
      refreshChange,
      searchChange,
      tagStatus,
      tagIsUrgent,
      handleReceive,
      selectionChange,
      handleBatchReceive,
    }
  }
}
</script>
